<template>
  <p>
    搜索 ：
    <el-input
      v-model="input1"
      placeholder="请输入员工姓名、手机号"
      style="width: 200px"
    />
    <el-button @click="cha1">查询</el-button>
    <el-button type="primary" @click="addyg">添加员工</el-button>

    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
      :before-close="handleClose"
    >
      <span>
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="formLabelAlign"
          style="max-width: 460px"
        >
          <el-form-item label="部门序号">
            <el-input
              v-model="formLabelAlign.id"
              placeholder="必填项，输入序号且不能重复"
            />
          </el-form-item>
          <el-form-item label="部门名称">
            <el-input
              v-model="formLabelAlign.name"
              placeholder="必填项，限制20个字符，汉字"
            />
          </el-form-item>
          <el-form-item label="负责人">
            <el-input
              v-model="formLabelAlign.port"
              placeholder="必填项，限制10个字符，汉字"
            />
          </el-form-item>
          <el-form-item label="职务">
            <el-input
              v-model="formLabelAlign.job"
              placeholder="必填项，限制20个字符，汉字"
            />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="formLabelAlign.tel"
              placeholder="必填项，限制11个字符，数字"
            />
          </el-form-item>
          <el-form-item label="生成密码">
            <el-input
              v-model="formLabelAlign.password"
              placeholder="必填项，限制11个字符，数字"
            />
          </el-form-item>
          <el-form-item label="数量">
            <el-input v-model="formLabelAlign.jobNum" placeholder="选填项" />
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="quit">退出编辑</el-button>
          <el-button type="primary" @click="submit"> 确认提交 </el-button>
        </span>
      </template>
    </el-dialog>
  </p>
  <el-table :data="tableData1" style="width: 100%">
    <el-table-column prop="id" label="序号" width="80" />
    <el-table-column prop="port" label="部门名称" width="100" />
    <el-table-column prop="jobNum" label="员工工号" width="80" />
    <el-table-column prop="name" label="姓名" width="100" />
    <el-table-column prop="job" label="职务" width="100" />
    <el-table-column prop="tel" label="手机号" width="150" />
    <el-table-column prop="password" label="生成密码" width="100" />
    <el-table-column label="操作" width="200">
      <template #default="{ row }">
        <el-button link type="primary" size="small" @click="handleClick1(row)"
          >编辑</el-button
        >
        <el-button link type="primary" size="small" @click="shan1(row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
const input1 = ref("");
const tableData1 = ref([]);
import type { FormProps } from "element-plus";
const dialogVisible = ref(false);
const labelPosition = ref<FormProps["labelPosition"]>("right");
var pattern = /^1[3-9]\d{9}$/;
import { ElMessage } from "element-plus";
const isEdit = ref(false);
const handleClose = (done: () => void) => {
  dialogVisible.value = false;
};

import {
  GET_YG,
  POST_ADDYG,
  POST_UPDATAYG,
  GET_DELECTYG,
  GET_SearchTYG,
} from "@/api/api.js";

onMounted(() => {
  getyg();
});
const getyg = () => {
  GET_YG()
    .then((res) => {
      console.log(res);
      tableData1.value = res.data.data;
    })
    .catch((err) => {});
};

const addyg = () => {
  dialogVisible.value = true;
  isEdit.value = false;
};

const formLabelAlign = reactive({
  name: "",
  port: "",
  job: "",
  tel: "",
  jobNum: "",
  id: "",
  password: "",
});

const submit = () => {
  if (
    formLabelAlign.port == "" &&
    formLabelAlign.name == "" &&
    formLabelAlign.job == "" &&
    formLabelAlign.tel == ""
  ) {
    alert("内容不能空");
  } else {
    if (formLabelAlign.port.length < 20) {
      if (formLabelAlign.job.length < 10) {
        if (formLabelAlign.name.length < 20) {
          if (pattern.test(formLabelAlign.tel)) {
            if (isEdit.value) {
              console.log(formLabelAlign);
              const editedEntry = tableData1.value.find(
                (item) => item.id === formLabelAlign.id
              );
              console.log(editedEntry);
              if (editedEntry) {
                console.log("修改");
                const data = {
                  id: formLabelAlign.id,
                  port: formLabelAlign.port,
                  name: formLabelAlign.name,
                  job: formLabelAlign.job,
                  tel: formLabelAlign.tel,
                  jobNum: formLabelAlign.jobNum,
                  password: formLabelAlign.password,
                };
                POST_UPDATAYG(data)
                  .then((res) => {
                    console.log(res);
                    getyg();
                  })
                  .catch((err) => {});
              }
              formLabelAlign.port = "";
              formLabelAlign.id = "";
              formLabelAlign.name = "";
              formLabelAlign.job = "";
              formLabelAlign.tel = "";
              formLabelAlign.jobNum = "";
              formLabelAlign.password = "";
              dialogVisible.value = false;
            } else {
              console.log("新增");

              const data = {
                id: formLabelAlign.id,
                port: formLabelAlign.port,
                name: formLabelAlign.name,
                job: formLabelAlign.job,
                tel: formLabelAlign.tel,
                password: formLabelAlign.password,
                jobNum: formLabelAlign.jobNum,
              };
              POST_ADDYG(data)
                .then((res) => {
                  console.log(res);
                  getyg();
                })
                .catch((err) => {});

              formLabelAlign.port = "";
              formLabelAlign.id = "";
              formLabelAlign.name = "";
              formLabelAlign.job = "";
              formLabelAlign.tel = "";
              formLabelAlign.jobNum = "";
              formLabelAlign.password = "";
              dialogVisible.value = false;
            }
          } else {
            ElMessage({
              dangerouslyUseHTMLString: true,
              message: "手机号格式不对",
            });
          }
        } else {
          ElMessage({
            dangerouslyUseHTMLString: true,
            message: "职务格式不对",
          });
        }
      } else {
        ElMessage({
          dangerouslyUseHTMLString: true,
          message: "负责人格式不对",
        });
      }
    } else {
      ElMessage({
        dangerouslyUseHTMLString: true,
        message: "部门格式不对",
      });
    }
  }
};

//退出编辑
const quit = () => {
  dialogVisible.value = false;
  formLabelAlign.port = "";
  formLabelAlign.id = "";
  formLabelAlign.name = "";
  formLabelAlign.job = "";
  formLabelAlign.tel = "";
  formLabelAlign.password = "";
  formLabelAlign.jobNum = "";
  dialogVisible.value = false;
};

const shan1 = (id: any) => {
  console.log(id, "id");

  GET_DELECTYG(id).then((res) => {
    console.log(res);
    getyg();
  });
  // .catch((err) => {
  //   console.log(err);
  // });
};

const handleClick1 = (row) => {
  isEdit.value = true;
  dialogVisible.value = true;
  console.log(row);
  formLabelAlign.name = row.name;
  formLabelAlign.port = row.port;
  formLabelAlign.id = row.id;
  formLabelAlign.job = row.job;
  formLabelAlign.tel = row.tel;
  formLabelAlign.password = row.password;
  formLabelAlign.jobNum = row.jobNum;
};
const cha1 = () => {
  if (input1.value == "") {
    getyg();
  } else {
    const parmas = {
      searchVal: input1.value,
    };
    GET_SearchTYG(parmas)
      .then((res) => {
        console.log(res);
        tableData1.value = res.data.data;
      })
      .catch((err) => {
        
      });
  }
};
</script>
<style scoped></style>
